{extend name="../index/public/mlay" /}
{block name="style"}
<style>
	.input {
		padding: 0.3rem 0.5rem;
		font-size: 0.8rem;
	}
	
	/* 圆角 */
	.br10 {
		border-radius: 10px;
	}
	
	.br30 {
		border-radius: 30px;
	}
	
	/* 外边距 */
	.mg5 {
		margin: 0.5rem;
	}
	
	.mgb {
		margin-bottom: 0.5rem;
	}
	
	.mgl10 {
		margin-left: 0.5rem;
	}
	
	/* 内边距 */
	.pd5 {
		padding: 0.5rem;
	}
	
	/* 宽度 */
	.w100 {
		width: 100%;
	}
	
	/* 字体颜色 */
	.col_red {
		color: red;
	}
	
	.col_c2 {
		color: #c2c2c2;
	}
	
	/* 字体大小 */
	/* 16px */
	.font_s16 {
		font-size: 0.8rem;
	}
	
	/* 背景色 */
	.bag38 {
		background: #38c8d0;
	}
	
	.bagbb {
		background: #bb9724;
	}
	
	.ral4 {
		border-top-left-radius: 36px;
		border-bottom-left-radius: 36px;
	}
	
	.rar4 {
		border-top-right-radius: 36px;
		border-bottom-right-radius: 36px;
	}
	
	/* 定位 */
	.fixed {
		position: fixed;
	}
	
	.bottom_0 {
		bottom: 0;
	}
	 .custom-indicator {
	    position: absolute;
	    right: 5px;
	    bottom: 5px;
	    padding: 2px 5px;
	    font-size: 12px;
	    background: rgba(0, 0, 0, 0.1);
	  }
	  .add-cart {
	  	border-radius: 30px;
	  	background: #a78928;
	  	text-align: center;
	  	color: #fff;
	  	margin: 0rem 3rem;
	  	padding: 0.5rem 2rem;
	  	font-size: 0.8rem;
	  }
	  .van-stepper--round .van-stepper__plus{
	  	background-color: #a78928 !important;
	  }
	  .van-stepper--round .van-stepper__minus{
	  	color: #a78928 !important;
	  	border: 1px solid #a78928 !important;
	  }
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
{/block}
{block name="header"}{/block}
{block name="container"}
<div id="app">
			<!-- <div class="bagfff br30 mg5">
				<input @click="search" class="input" type="text" placeholder="请输入" id="" value="" />
			</div> -->
		<!-- 	<div>
				<img class="w100" src="__TEM_STATIC__/img/1.jpg">
			</div> -->
			<van-swipe @change="onChange" style="margin: 0.5rem;height: 200px;" :show-indicators='false' :autoplay="3000">
				<van-swipe-item v-cloak v-for="(list, index) in images" :key="index">
					<img v-cloak :src="list.image" >
				</van-swipe-item>
				 <template #indicator>
				    <div class="custom-indicator" style="color: #fff;" v-cloak>{{ current + 1 }}/{{images.length}}</div>
				  </template>
			</van-swipe>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5">
				<div class="" v-cloak>{{detail.title}}</div>
				<div class="col_red" v-cloak>￥{{detail.price}}</div>
<!--				<div class="col_red" v-cloak>￥{{detail.discount}}</div>-->
			</div>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5 font_s16">
				<div @click="showPopup" class="flex ju_sb ai_center mgb">
					<div>
						<span class="col_c2">选择</span>
						<span class="mgl10" v-cloak>{{box_number}}盒</span>
					</div>	
					<img style="width: 0.8rem;height: 0.8rem;" src="__TEM_STATIC__/img/my/rightThearrow.png">
				</div>
				<van-popup position="bottom" round lock-scroll :overlay="true" :close-on-click-overlay='true' :style="{ height: '40%' }" v-model="show2">
					<div v-show="show2" style="padding: 1rem 1rem;display: none;" class="">
						<div class="flex">
							<img style="width: 3rem;height: 3rem;border-radius: 10px;margin-right: 0.5rem;" v-cloak :src="images[0].image">
							<div>
								<div v-cloak>{{detail.title}}</div>
								<div style="color: #a78928;" v-cloak>{{detail.price}}元</div>
							</div>
						</div>
						<p style="padding: 0.5rem 0;">备注:<input v-model="note" type="text" placeholder="请输入" value="" /></p>	
						<van-stepper @change="stepper" v-model="box_number" theme="round" button-size="22" disable-input ></van-stepper>
					</div>
					<div @click="add" v-show="show2" class="add-cart" style="display: none;">
						添加购物车
					</div>
				</van-popup>
				<div class="flex ju_sb ai_center mgb">
					<div class="flex">
						<span class="col_c2">发货</span>
						<span style="flex: 1;" class="mgl10">满1000包邮(新疆满5000包邮)艾制品、物料均不包邮。</span>
					</div>
					<img style="width: 0.8rem;height: 0.8rem;" src="__TEM_STATIC__/img/my/rightThearrow.png">
				</div>
				<div class="flex ju_sb ai_center mgb">
					<div>
						<span class="col_c2">参数</span>
						<span class="mgl10">品牌:材质...</span>
					</div>
					<img style="width: 0.8rem;height: 0.8rem;" src="__TEM_STATIC__/img/my/rightThearrow.png">
				</div>
			</div>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5">
				<div class="">商品介绍</div>
			</div>
			<div class="bagfff br10 mg5 pd5">
				<div class="font_s16">{$detail.content|raw}</div>
			</div>
		
			<div class="bagfff w100 fixed bottom_0 flex ju_sb ai_center" style="padding: 0.2rem 0;">
				<div @click="kefu" class="tc" style="margin-left: 1rem;">
					<img style="width: 20px;height: 20px;" src="__TEM_STATIC__/img/my/my_service.png">
					<div style="font-size: 0.5rem;color: #999999;">客服</div>
				</div>
				<div class="flex" style="color: #fff;font-size: 0.8rem;margin-right: 1rem;">
					<div @click="showPopup" style="width: 100px;height: 35px;line-height: 35px;" class="bag38 ral4 tc">加入购物车</div>
					<div @click="immediately" style="width: 100px;height: 35px;line-height: 35px;" class="bagbb rar4 tc">立即购买</div>
				</div>
			</div>
		</div>
{/block}
{block name="page-footer"}<div class="footer"></div>{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
		  return {
			show2: false,//加入购物车
			box_number:1,
			current: 0,
			detail: {$detail|json_encode|raw},//商品信息
			images: {$detail.images|json_encode|raw},//很明显是图片:轮播图
			note: '',//备注
		  }
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created: function() {
		},
		mounted() {
			console.log(this.detail);
	
		},
		methods: {
			onChange(index) {
			      this.current = index;
			    },
				click_choose: function() {
					console.log('选择')
				},
			search: function() {
				window.location.href = "search.html"
			},
			immediately: function() {
				var that = this
				console.log('立即购买')
				$.post("{:url('mall/cart/add')}", {
					gid: that.detail.id,
					nums: that.box_number,
					remark: that.note,
				}, function(res) {
					if(res.code == 1) {
						vant.Toast.success('添加成功');
						window.location.href = "{:real_url('mall/cart/index')}/id/" + that.detail.id
					} else {
						vant.Toast.fail(res.msg);
					}
					console.log(res);
				});
				
			},
			add_car: function() {
				window.location.href = "the_shopping_cart.html"
			},
			showPopup() {
			      this.show2 = true;
		    },
			add() {
				this.show2 = false;
			},
			stepper(e) {
				console.log(e);
			},
			add: function() {
				this.show2 = false
				$.post("{:url('mall/cart/add')}", {
					gid: this.detail.id,
					nums: this.box_number,
					remark: this.note,
				}, function(res) {
					if(res.code == 1) {
						vant.Toast.success('添加成功');
					} else {
						vant.Toast.fail(res.msg);
					}
					console.log(res);
				});
			},
			kefu() {
				vant.Dialog.confirm({
				  title: '客服电话',
				  message: "{:app_config('mall', 'phone')}",
				})
				  .then(() => {
				    // on confirm
					window.location.href = "tel:{:app_config('mall', 'phone')}"
				  })
				  .catch(() => {
				    // on cancel
				  });
			}
		}
	})
</script>
{/block}
